<template>
	<u--form :model="formData" :rules="rules" ref="uForm" labelPosition="top">
		<view class="app-container">
			<view class="bindoldphone-container">
				<div class="form-item">
					<label>代阅账户</label>
					<u-form-item label="" prop="phone">
						<u-input placeholder="请输入您的手机号码" v-model="formData.phone"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<u-input v-model="formData.number">
						<template slot="suffix">
							<text style="color: #00b6fc; font-size: 14px">发送验证码</text>
						</template>
					</u-input>
				</div>
				<div class="form-item">
					<label>密码</label>
					<u-form-item label="" prop="password">
						<u-input placeholder="请输入您的密码" type="password" v-model="formData.password"></u-input>
					</u-form-item>
				</div>
				<u-button text="完成" shape="circle" type="primary" @click="onClick"></u-button>
			</view>
		</view>
	</u--form>
</template>

<script>
	import {
		bindOldPhone
	} from '@/api/api.js'
	export default {
		data() {
			return {
				formData: {
					phone: '',
					number: '',
					password: ''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		methods: {
			onClick() {
				this.$refs.uForm.validate().then(async res => {
					uni.showLoading({
						mask: true
					})
					await bindOldPhone({
							...this.formData,
							id: this.$store.state.user.id,
							bossId: this.$store.state.user.bossId
						})
						.then((res) => {
							if (res.code === 10000) {
								uni.showToast({
									title: '添加成功',
									success() {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								})
								uni.hideLoading()
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.message,
									icon: 'error',
									duration: 1000
								});
							}

						})

				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss">
	.bindoldphone-container {
		background-color: #fff;
		padding: 14px;

		.form-item {
			margin-bottom: 16px;

			&:last-of-type {
				margin-bottom: 36px;
			}

			label {
				line-height: 22px;
				font-size: 16px;
				position: relative;

				&:after {
					content: '';
					width: 16px;
					height: 16px;
					position: absolute;
					right: -16px;
					top: 3px;
					background: url('@/static/icons/bitian.svg') no-repeat;
				}
			}

			.u-input {
				margin-top: 12px;
				background-color: #f5f6f7;
				border-radius: 8px;

				&::placeholder {
					color: #c7c7c7;
				}
			}
		}

		.u-button {
			margin-bottom: 30px;
		}
	}
</style>
